<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Texas Hold'em</title>
<link rel="stylesheet" type="text/css" href="styles.css" />

<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="js/engine.js"></script>
<script type="text/javascript" src="js/chat.js"></script>

</head>
<body>
<button id="startGameButton" type="button">Start Game</button>
<div class="main">
	<h1>bat-poker</h1> 
	<div class="tableArea">
		<div class="table">
			<div class="pot">Pot: $0</div>	
			
			<!-- Card deck -->
			<div id="deck" class="deck card backSide"></div>
			
			<!-- Community cards -->
			<div id="community0" class="community card" >
				<div class="top number"></div>	
				<div class="suit"></div>
			 	<div class="bottom number"></div>
			</div>
			
			<div id="community1" class="community card" >
				<div class="top number"></div>
				<div class="suit"></div>
				<div class="bottom number"></div>
			</div>
			
			<div id="community2" class="community card"  >
				<div class="top number"></div>
				<div class="suit"></div>
				<div class="bottom number"></div>
			</div>
			
			<div id="community3" class="community card" >
				<div class="top number"></div>
				<div class="suit"></div>
				<div class="bottom number"></div>	
			</div>
			
			<div id="community4" class="community card" >
				<div class="top number"></div>
				<div class="suit"></div>
				<div class="bottom number"></div>	
			</div>
					 
		</div>
		
		<!-- Players -->
		<div id = "bot0" class="player">			
			<div class="playerInfo">
				<dl>
					<dt class="action">Fold</dt>
					<dt class="betSize">Bet $10</dt>
					<dt class="name">Batman</dt>
					<dt class="amount">$90</dt>
				</dl>
			</div>
			<div class="card1 backSide playerCard card">
				  <div class="top smallNumber"></div>
                  <div class="smallSuit"></div>
                  <div class="bottom smallNumber"></div>
			</div> 
			<div class="card2 backSide playerCard card">
				<div class="top smallNumber"></div>
                <div class="smallSuit"></div>
                <div class="bottom smallNumber"></div>
			</div>
		</div>
		
		<div id ="bot1" class="player">			
			<div class="playerInfo">
				<dl>
					<dt class="action"></dt>
					<dt class="betSize"></dt>
					<dt class="name"></dt>
					<dt class="amount"></dt>
				</dl>
			</div>
			<div class="card1 backSide playerCard card">
				  <div class="top smallNumber"></div>
                  <div class="smallSuit"></div>
                  <div class="bottom smallNumber"></div>
			</div> 
			<div class="card2 backSide playerCard card">
				<div class="top smallNumber"></div>
                <div class="smallSuit"></div>
                <div class="bottom smallNumber"></div>
			</div>
		</div>
		
		<div id = "bot2" class="player">			
			<div class="playerInfo">
				<dl>
					<dt class="action"></dt>
					<dt class="betSize"></dt>
					<dt class="name"></dt>
					<dt class="amount"></dt>
				</dl>
			</div>
			<div class="card1 backSide playerCard card">
				  <div class="top smallNumber"></div>
                  <div class="smallSuit"></div>
                  <div class="bottom smallNumber"></div>
			</div> 
			<div class="card2 backSide playerCard card">
				<div class="top smallNumber"></div>
                <div class="smallSuit"></div>
                <div class="bottom smallNumber"></div>
			</div>
		</div>
		
		<div id = "bot3" class="player">			
			<div class="playerInfo">
				<dl>
					<dt class="action"></dt>
					<dt class="betSize"></dt>
					<dt class="name"></dt>
					<dt class="amount"></dt>
				</dl>
			</div>
			<div class="card1 backSide playerCard card">
				  <div class="top smallNumber"></div>
                  <div class="smallSuit"></div>
                  <div class="bottom smallNumber"></div>
			</div> 
			<div class="card2 backSide playerCard card">
				<div class="top smallNumber"></div>
                <div class="smallSuit"></div>
                <div class="bottom smallNumber"></div>
			</div>
		</div>

		<div id = "bot4" class="player">			
			<div class="playerInfo">
				<dl>
					<dt class="action"></dt>
					<dt class="betSize"></dt>
					<dt class="name"></dt>
					<dt class="amount"></dt>
				</dl>
			</div>
			<div class="card1 backSide playerCard card">
				  <div class="top smallNumber"></div>
                  <div class="smallSuit"></div>
                  <div class="bottom smallNumber"></div>
			</div> 
			<div class="card2 backSide playerCard card">
				<div class="top smallNumber"></div>
                <div class="smallSuit"></div>
                <div class="bottom smallNumber"></div>
			</div>
		</div>

		<div id = "bot5" class="player">			
			<div class="playerInfo">
				<dl>
					<dt class="action"></dt>
					<dt class="betSize"></dt>
					<dt class="name"></dt>
					<dt class="amount"></dt>
				</dl>
			</div>
			<div class="card1 backSide playerCard card">
				  <div class="top smallNumber"></div>
                  <div class="smallSuit"></div>
                  <div class="bottom smallNumber"></div>
			</div> 
			<div class="card2 backSide playerCard card">
				<div class="top smallNumber"></div>
                <div class="smallSuit"></div>
                <div class="bottom smallNumber"></div>
			</div>
		</div>

		<div id = "bot6" class="player">			
			<div class="playerInfo">
				<dl>
					<dt class="action"></dt>
					<dt class="betSize"></dt>
					<dt class="name"></dt>
					<dt class="amount"></dt>
				</dl>
			</div>
			<div class="card1 backSide playerCard card">
				  <div class="top smallNumber"></div>
                  <div class="smallSuit"></div>
                  <div class="bottom smallNumber"></div>
			</div> 
			<div class="card2 backSide playerCard card">
				<div class="top smallNumber"></div>
                <div class="smallSuit"></div>
                <div class="bottom smallNumber"></div>
			</div>
		</div>

		<div id = "bot7" class="player">			
			<div class="playerInfo">
				<dl>
					<dt class="action"></dt>
					<dt class="betSize"></dt>
					<dt class="name"></dt>
					<dt class="amount"></dt>
				</dl>
			</div>
			<div class="card1 backSide playerCard card">
				  <div class="top smallNumber"></div>
                  <div class="smallSuit"></div>
                  <div class="bottom smallNumber"></div>
			</div> 
			<div class="card2 backSide playerCard card">
				<div class="top smallNumber"></div>
                <div class="smallSuit"></div>
                <div class="bottom smallNumber"></div>
			</div>
		</div>

		<div id = "bot8" class="player">		
			<div class="playerInfo">
				<dl>
					<dt class="action"></dt>
					<dt class="betSize"></dt>
					<dt class="name"></dt>
					<dt class="amount"></dt>
				</dl>
			</div>
			<div class="card1 backSide playerCard card">
				  <div class="top smallNumber"></div>
                  <div class="smallSuit"></div>
                  <div class="bottom smallNumber"></div>
			</div> 
			<div class="card2 backSide playerCard card">
				<div class="top smallNumber"></div>
                <div class="smallSuit"></div>
                <div class="bottom smallNumber"></div>
			</div>
		</div>

	</div>
	<div id="sidebar">
		<div class="chatbox">	
				<h2>Chatbox</h2>
				<div id="chatArea"></div>	
				<form onsubmit="return displayText(this.message.value, message, 'Batman');" >					
				<input type="text" name="message" maxlength="200" />
			</form>
		</div>
		
		<!-- Player action buttons -->
		<div class = "actionControl">
			<button id="check" class="playerActionButton" type="button">Check</button>
			<button id="call" class="playerActionButton" type="button">Call</button>
			<button id="bet" class="playerActionButton" type="button">Raise</button><br/>
			<button id="fold" class="playerActionButton" type="button">Fold</button>
			<button id="endGameButton" type="button">End Game</button>
		</div>
		
	</div>
	<div id="logBox">
		<div id="logArea"></div>
	</div>
</div>
</body>
</html>